import React, {CSSProperties, useImperativeHandle} from "react";
import {Col, Form, Input, message, Radio, Row, Switch} from "antd";
import styled from "@emotion/styled";
import {Post} from "../../utils/http";

const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};

interface SecondFormProp {
    default_source: string;
    endpoint: string;
    access_key_id: string;
    access_key_secret: string;
    bucket_name: string;
    use_cname: boolean;
}

type SecondProp = {
    innerRef: React.Ref<{saveStorage(): void}>;
    style: CSSProperties;
    isNext: (flag: boolean) => void;
}

export const SecondStep:React.FC<SecondProp> = (props: SecondProp) => {

    const [form] = Form.useForm<SecondFormProp>();

    useImperativeHandle(props.innerRef, () => ({
        saveStorage: () => {
            form.validateFields().then(value => {
                console.log("数据源存储的表单信息", value)
                Post<boolean>('/install/storage', {...value}).then(res => {
                    if (res.code === '100200') {
                        message.success('配置存储源成功');
                        props.isNext(true);
                    } else {
                        message.error(res.msg);
                        props.isNext(false);
                    }
                })
            })
        }
    }))

    return <Container style={props.style}>
        <Col span={14} offset={5} style={{marginTop: '8%'}}>
            <Form
                className="form-area"
                {...layout}
                form={form}
                labelAlign={"left"}
                layout="horizontal"
                name="form_in_modal"
            >
                <Form.Item label="存储源" name="default_source" rules={[{required: true, message: '请选择一种存储源'}]}>
                    <Radio.Group defaultValue={'cloud'}>
                        <Radio value={'location'} disabled>本地存储</Radio>
                        <Radio value={'ali_yun'}>阿里云</Radio>
                        <Radio value={'tx_yun'} disabled>腾讯云</Radio>
                        <Radio value={'qn——yun'} disabled>七牛云</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="Endpoint" name="endpoint" rules={[{required: true, message: '请输入Endpoint'}]}>
                    <Input />
                </Form.Item>
                <Form.Item label="KeyId" name="access_key_id" rules={[{required: true, message: '请输入AccessKeyId'}]}>
                    <Input />
                </Form.Item>
                <Form.Item label="KeySecret" name="access_key_secret" rules={[{required: true, message: '请输入AccessKeySecret'}]}>
                    <Input />
                </Form.Item>
                <Form.Item label="BucketName" name="bucket_name" rules={[{required: true, message: '请输入BucketName'}]}>
                    <Input />
                </Form.Item>
                <Form.Item label="UseCname" name="use_cname" rules={[{required: true, message: '请输入选择UseCname'}]}>
                    <Switch checkedChildren="true" unCheckedChildren="false" />
                </Form.Item>
            </Form>
        </Col>
    </Container>
}


const Container = styled(Row)`
//.form-area {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-between;
//}
`
